配置 moduleDirectories 讓 Jest 支援自訂的 Module Resolution

有時候，專案可能有些 modules 會被多個文件頻繁引入，因為其他文件的路徑分佈不一定，在不同的文件裡面我們要引入 module 的話，路徑來源都不一樣，而且常常是很長的相對路徑，例如： ../../../components/buttons 。

針對這個問題，我們可以利用 Webpac 的 resolve.modules 做優化。這個配置告訴 Webpac 去哪些目錄下尋找第三方的 module，預設是 'node_modules' 。加入其他路徑，我們可以像引用 node_modules 一樣，不需要再寫冗長的相對路徑：

webpack.config.js

const path = require('path')

module.exports = {
  ...
  resolve: {
    modules: ['node_modules', path.join(__dirname, 'src'), 'shared'], // 加入路徑
  },
	...

假設這是專案內一部分的檔案結構：

src
├── __tests__
│   └── calculator.js
├── shared
│   └── calculator-display.js
└── calculator.js

現在我們在 shared 裡面的檔案可以像 node_modules 一樣被引入：

src/calculator.js

import CalculatorDisplay from 'calculator-display'

...

這時候，如果我們 npm run test 測試 src/calculator.js ，Jest 會拋出錯誤 "Cannot find module CalculatorDisplay from calculator." 。 這個錯誤是因為我們在 Webpac 使用了 resolve.modules 來優化 module 的引入，卻沒有告訴 Jest 要怎麼解析我們自訂的 module 路徑，所以 Jest 找不到它們。 現在，我們需要在 jest.config.js 加上 moduleDirectories ，value 為跟 Webpac resolve.modules 配置一樣的 array：

jest.config.js

const path = require('path')

module.exports = {
  moduleDirectories: ['node_modules', path.join(__dirname, 'src'), 'shared'], // 跟 Webpac resolve.modules 配置一樣的 array
  ...
}

再 npm run test 一次，測試就會正常了。